<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Welcome to Pwnography!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css"
	href="../../../../../css/bootstrap-responsive.min.css"
	th:href="@{/css/bootstrap-responsive.min.css}" />
<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../css/datatable-bootstrap.css"
	th:href="@{/css/datatable-bootstrap.css}" />

<!-- This style is needed for top navigation bar. It needs some space. Otherwise it would cover body. -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->


	<!-- MAIN CONTAINER -->
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="page-header">
				<h1>k-NN - Klasyfikacja</h1>
			</div>
		</div>

		<!-- MESSAGE BOXES -->
		<div class="row-fluid" th:include="template :: message-boxes"></div>
		<!-- /MESSAGE BOXES -->

		<div class="row-fluid">
			<!-- LEFT COLUMN -->
			<div class="span5">
				<form class="form-horizontal"
					th:action="@{/module/knn/all/classification}" th:object="${form}"
					method="POST">
					<fieldset>
						<div class="control-group"
							th:classappend="${#fields.hasErrors('columnName')}? 'error'">
							<label class="control-label" for="columnName">Klasa</label>
							<div class="controls">
								<select class="span3" id="columnName" th:field="*{columnName}">
									<option th:each="col : ${stringColumnList}" th:value="${col}"
										th:text="${col}">BRAK</option>
								</select>
								<p th:if="${#fields.hasErrors('columnName')}">
									<span class="help-inline" th:errors="*{columnName}">ERROR</span>
								</p>
							</div>
						</div>

						<div class="control-group"
							th:classappend="${#fields.hasErrors('metric')}? 'error'">
							<label class="control-label" for="metric">Metryka</label>
							<div class="controls">
								<select class="span3" id="metric" th:field="*{metric}">
									<option th:each="metric : ${metricList}" th:value="${metric}"
										th:text="${metric}">BRAK</option>
								</select>
								<p th:if="${#fields.hasErrors('metric')}">
									<span class="help-inline" th:errors="*{metric}">ERROR</span>
								</p>
							</div>
						</div>

						<div class="control-group"
							th:classappend="${#fields.hasErrors('kneighbors')}? 'error'">
							<label class="control-label" for="max">Liczba sąsiadów <code>k</code>
							</label>
							<div class="controls">
								<input type="text" class="input-xlarge span3" id="kneighbors"
									th:field="*{kneighbors}" />
								<p th:if="${#fields.hasErrors('kneighbors')}">
									<span class="help-inline" th:errors="*{kneighbors}">ERROR</span>
								</p>
							</div>
						</div>

						<div class="control-group"
							th:classappend="${#fields.hasErrors('excludedColumns')}? 'error'">
							<label class="control-label" for="excludedColumns">Kolumny
								wyłączone z obliczeń </label>
							<div class="controls">
								<select class="span3" id="excludedColumns"
									th:field="*{excludedColumns}" multiple="multiple">
									<option th:each="col : ${floatColumnList}" th:value="${col}"
										th:text="${col}">Kolumna</option>
								</select>
								<p th:if="${#fields.hasErrors('excludedColumns')}">
									<span class="help-inline" th:errors="*{excludedColumns}">ERROR</span>
								</p>
								<p class="help-block">W tym miejscu zaznacz wszystkie
									kolumny, które mają zostać wyłączone z obliczeń. Kolumny
									zawierające wartości inne niż liczbowe, są automatycznie
									pomijane. To samo tyczy się wybranej klasy.</p>
							</div>
						</div>


						<div class="control-group"
							th:classappend="${#fields.hasErrors('attributeValues')}? 'error'">
							<label class="control-label" for="attributeValues">
								Wartości atrybutów </label>
							<div class="controls">
								<textarea class="input-xlarge span3" id="attributeValues"
									th:field="*{attributeValues}"></textarea>
								<p th:if="${#fields.hasErrors('attributeValues')}">
									<span class="help-inline" th:errors="*{attributeValues}">ERROR</span>
								</p>
								<p class="help-block">
									W to pole proszę wpisać wartości kolejnych atrybutów oddzielone
									przecinkami. Wartości muszą być wartościami liczbowymi oraz ich
									ilość musi odpowiadać ilości kolumn które biorą udział w
									obliczeniach. Przykład (dla 8 atrybutów):
									<code>4, 4.5, 5, 5.566, 666, 666.666, 1, -23</code>
								</p>
							</div>
						</div>


						<div class="form-actions">
							<button class="btn btn-success" type="submit">
								<i class="icon-ok icon-white"></i> Zatwierdź
							</button>
						</div>
					</fieldset>
				</form>
			</div>
			<!-- /LEFT COLUMN -->

			<!-- RIGHT COLUMN -->
			<div class="span7">
				<div class="well">
					<p>
						W trybie klasyfikacji zadajemy nowy obiekt bez przypisanej klasy
						decyzyjnej, określamy liczbę sąsiadów
						<code>k</code>
						i metrykę w ocenie odległości obiektów. Zadaniem narzędzia jest
						przydzielenie nowego obiektu do klasy decyzyjnej, do której należy
						najwięcej spośród jego
						<code>k</code>
						najbliższych sąsiadów wyznaczonych zgodnie z określoną metryką.
					</p>
				</div>
			</div>
			<!-- /RIGHT COLUMN -->
		</div>


	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-latest.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
	<!-- DataTable -->
	<script type="text/javascript" src="../../js/jquery.dataTables.min.js"
		th:src="@{/js/jquery.dataTables.min.js}"></script>
	<script type="text/javascript" src="../../js/datatable-bootstrap.js"
		th:src="@{/js/datatable-bootstrap.js}"></script>
	<!-- Custom scripting -->
	<script type="text/javascript" src="../../js/custom/showhidediv.js"
		th:src="@{/js/custom/showhidediv.js}"></script>
</body>
</html>